<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl" xmlns:bb="http://www.backbase.com/2006/client"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="visualElement dimensionElement positionElement" src="../../visualElement/visualElement.xml"/>
		<d:uses element="pagerBase pagerButtonBase pagerNumbersBase pagerJumperBase" interface="iPagerNumbers iPageJumper" src="../pagerBase.xml"/>
		<d:uses element="focusableElement" src="../../focus/focus.xml"/>

		<d:resource type="image/png" src="media/pagerBackground.png"/>
		<d:resource type="image/png" src="media/icons.png"/>
		<d:resource type="text/css"><![CDATA[.btl-pagerBar {
	padding: 0 5px;
	background-image: url(media/pagerBackground.png);
	background-repeat: repeat-x;
	background-color: #E2E2E1;
}
.btl-pager a {
	color: #000000;
	text-decoration: none;
}
.btl-pagerButton {
	border-style: none;
	padding: 2px;
}
.btl-pagerButton-inner {
	background-repeat: no-repeat;
}
.btl-pagerButton-hover,
.btl-pagerButton-press {
	border-style: solid;
	border-width: 1px;
}
.btl-pagerButton-hover {
	padding: 1px;
}
.btl-pagerButton-focusIndicator {
	display: block;
	padding: 3px;
	height: 100%;
}
.btl-pagerButton-first .btl-pagerButton-inner {
	background-image: url(media/icons.png);
	background-position: 2px center;
	width: 20px;
}
.btl-pagerButton-previous .btl-pagerButton-inner {
	background-image: url(media/icons.png);
	background-position: -16px center;
	width: 14px;
}
.btl-pagerButton-next .btl-pagerButton-inner {
	background-image: url(media/icons.png);
	background-position: -28px center;
	width: 14px;
}
.btl-pagerButton-last .btl-pagerButton-inner {
	background-image: url(media/icons.png);
	background-position: -40px center;
	width: 20px;
}
.btl-pagerButton-first .btl-disabled {
	background-position: -58px center;
}
.btl-pagerButton-previous .btl-disabled {
	background-position: -76px center;
}
.btl-pagerButton-next .btl-disabled {
	background-position: -88px center;
}
.btl-pagerButton-last .btl-disabled {
	background-position: -100px center;
}
.btl-pager .btl-disabled,
.btl-pager .btl-disabled * {
	cursor: default;
}
.btl-pagerNumbers {
	height: 100%;
	width: 100%;
	text-align: center;
}
.btl-pagerNumbers-inner {
	margin-left: auto;
	margin-right: auto;
	height: 100%;
}
.btl-pagerButton-currentNumber {
	font-weight: bold;
}
.btl-pagerJumper {
	height: 100%;
	width: 100%;
	text-align: center; /* centers table inside only in IE */
}
.btl-pagerJumper-label {
	white-space: nowrap;
}
.btl-pagerJumper-table {
	/* to center the table */
	margin: auto;
}
.btl-pagerJumper input {
	text-align: center;
	width: 2.5em;
}
.btl-pagerSeparator {
	height: 100%;
}
.btl-pagerSeparatorLine {
	margin: 0 4px;
	border-width: 0 1px;
	border-style: solid;
	border-color: #CFD3D9 #FFF #FFF #CFD3D9;
	padding: 0;
	height: 100%;
}
/* fixes */
.btl-pagerBar,
.btl-pager,
.btl-pager * {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}
.opera .btl-pagerButton-inner {
	min-height: 17px; /* without this the pager buttons "collapse" when you hover over them */
}
.gecko .btl-pagerButton-focusIndicator:focus {
	-moz-outline: 1px dotted invert;
	-moz-outline-offset: -1px;
}]]></d:resource>

		<d:element name="pagerBar" extends="b:dimensionElement b:positionElement">
			

			<d:template type="application/xhtml+xml">
				<div class="btl-pagerBar btl-bevel-top-bottom"><d:content/></div>
			</d:template>
		</d:element>

		<d:element name="pager" extends="b:dimensionElement b:pagerBase">
			
			<d:template type="application/xhtml+xml">
				<table border="0" cellpadding="0" cellspacing="0" class="btl-pager">
					<tbody>
						<tr style="height:100%">
							<d:content/>
						</tr>
					</tbody>
				</table>
			</d:template>

			<d:attribute name="align">
				
				<d:mapper type="text/javascript"><![CDATA[
					if(bb.browser.ie && bb.browser.quirks && value=='right') {
						// fix for bug 5823
						var oParent = this.getProperty('parentNode');
						if(bb.instanceOf(oParent, btl.namespaceURI, 'pagerBar')) {
							oParent.viewNode.style.textAlign = value;
						}
					}
					else {
						if(value == 'left'){
							this.viewNode.align = '';
						} else if(value == 'center'){
							this.viewNode.align = value;
						} else if(value == 'right'){
							this.viewNode.align = '';
							this.viewNode.style.marginLeft = 'auto';
							this.viewNode.style.marginRight = '0';
						}
					}
				]]></d:mapper>
			</d:attribute>
		</d:element>

		<d:element name="pagerButton" extends="b:pagerButtonBase b:focusableElement">
			

			<d:template type="application/xhtml+xml">
				<td class="btl-pagerButton">
					<div class="btl-pagerButton-inner">
						<a href="javascript://" onclick="return false;" tabindex="0" class="btl-pagerButton-focusIndicator btl-label"> <d:content/></a>
					</div>
				</td>
			</d:template>

			<d:attribute name="disabled">
				
				<d:mapper type="text/javascript"><![CDATA[
					var oElm = this.getProperty('focusElement');
					if(btl.isTrueValue(name, value)){
						oElm.disabled = true;
						this._['_enabledTabIndex'] = parseInt(this.getAttribute('tabindex'), 10) || 0;
						oElm.tabIndex = -1;
						oElm.onmousedown = btl.funcReturnFalse;
						bb.html.removeClass(this.viewNode, ['btl-pagerButton-hover', 'btl-pagerButton-press', 'btl-chameleon-highlightBorder']);
						bb.html.addClass(this.viewNode.firstChild, 'btl-disabled');
					} else {
						bb.html.removeClass(this.viewNode.firstChild, 'btl-disabled');
						oElm.disabled = false;
						oElm.tabIndex = this._['_enabledTabIndex'] || 0;
						oElm.onmousedown = null;
					}
				]]></d:mapper>
			</d:attribute>

			<d:attribute name="type">
				<d:mapper type="text/javascript"><![CDATA[
					bb.html.removeClass(this.viewNode, ['btl-pagerButton-first', 'btl-pagerButton-previous', 'btl-pagerButton-next', 'btl-pagerButton-last']);
					switch(value){
						case 'First':
								bb.html.addClass(this.viewNode, 'btl-pagerButton-first');
								break;
						case 'Previous':
								bb.html.addClass(this.viewNode, 'btl-pagerButton-previous');
								break;
						case 'Next':
								bb.html.addClass(this.viewNode, 'btl-pagerButton-next');
								break;
						case 'Last':
								bb.html.addClass(this.viewNode, 'btl-pagerButton-last');
								break;
						default:
								break;
					}
					if(!this.getAttribute('title')) {
						this.setAttribute('title', value + ' Page');
					}
				]]></d:mapper>
			</d:attribute>

			<d:handler event="mouseenter" type="text/javascript"><![CDATA[
				bb.html.addClass(this.viewNode, ['btl-pagerButton-hover', 'btl-chameleon-highlightBorder']);
			]]></d:handler>

			<d:handler event="mouseleave" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, ['btl-pagerButton-hover', 'btl-pagerButton-press', 'btl-chameleon-normalBorder', 'btl-chameleon-highlightBorder']);
			]]></d:handler>

			<d:handler event="mousedown" type="text/javascript"><![CDATA[
				if(event.button == 0){
					bb.html.addClass(this.viewNode, 'btl-pagerButton-press');
					bb.html.replaceClass(this.viewNode, 'btl-chameleon-highlightBorder', 'btl-chameleon-normalBorder');
				}
			]]></d:handler>

			<d:handler event="mouseup" type="text/javascript"><![CDATA[
				bb.html.removeClass(this.viewNode, 'btl-pagerButton-press');
				bb.html.replaceClass(this.viewNode, 'btl-chameleon-normalBorder', 'btl-chameleon-highlightBorder');
			]]></d:handler>
		</d:element>

		<d:element name="pagerNumbers" extends="b:dimensionElement b:pagerNumbersBase" implements="b:iPagerNumbers">
			

			<d:template type="application/xhtml+xml">
				<td class="btl-pagerNumbers">
					<table class="btl-pagerNumbers-inner" border="0" cellpadding="0" cellspacing="0">
						<tbody>
							<tr>
								<d:content/>
							</tr>
						</tbody>
					</table>
				</td>
			</d:template>

			<d:property name="serializedButton">
				
				<d:getter type="text/javascript"><![CDATA[
					return '<b:pagerButton xmlns:b="' + btl.namespaceURI + '">1</b:pagerButton>';
				]]></d:getter>
			</d:property>
		</d:element>

		<d:element name="pagerJumper" extends="b:dimensionElement b:pagerJumperBase" implements="b:iPagerJumper">
			
			<d:template type="application/xhtml+xml">
				<td class="btl-pagerJumper">
					<table cellpadding="0" cellspacing="0" border="0" class="btl-pagerJumper-table">
						<tbody>
							<tr>
								<td class="btl-pagerJumper-label btl-label">Page </td>
								<td><input type="text" value="1" onchange="btl.pager.handleJumperChange(this)"/></td>
								<td class="btl-pagerJumper-label btl-label"> of <span>1</span></td>
							</tr>
						</tbody>
					</table>
				</td>
			</d:template>

			<d:property name="pageInput" onget="return this.viewNode.getElementsByTagName('input')[0]">
				
			</d:property>

			<d:property name="totalDisplay" onget="return this.viewNode.getElementsByTagName('span')[0]">
				
			</d:property>

			<d:handler event="keydown" type="text/javascript"><![CDATA[
				if((bb.browser.ie || bb.browser.opera ) && event.keyIdentifier == "Enter") {
					// IE and Opera do not automatically fire the change event for the
					// input element when the Enter key is pressed. See bug 6607.
					var oPageInput = this.getProperty("pageInput");
					var iValue = oPageInput.value;
					var oParent = this.getProperty('parentNode');
					var oForElement = oParent.getProperty('forElement');
					if(oForElement.getProperty("page") != iValue) {
						btl.pager.handleJumperChange(oPageInput);
					}
				}
			]]></d:handler>
		</d:element>

		<d:element name="pagerSeparator" extends="b:visualElement">
			
			<d:template type="application/xhtml+xml">
				<td class="btl-pagerSeparator">
					<div class="btl-pagerSeparatorLine"/>
				</td>
			</d:template>
		</d:element>
	</d:namespace>
</d:tdl>